﻿<div class="ui-widget-content">
    <h3>Accordion</h3>
    <p>O accordion é um componente que divide o conteúdo em sessões mostrando uma delas e escondendo as demais. É ótimo para organizar o conteúdo da tela. Por exemplo:</p>
    
    <div>
        <a id="botao_aplica_accordion" href="#">Aplicar</a>
    </div>

    <div>
        <a id="botao_como_faz_accordion" href="#">Como faz?</a>
        <div id="dialog_como_faz_accordion" title="Como faz o accordion" style="display: none;"  class="dialog_apresentacao">
            <h3>HTML:</h3>
            <pre>&lt;div id="meu_accordion"&gt;
  &lt;h3&gt;&lt;a href="#"&gt;Sessão 1&lt;/a&gt;&lt;/h3&gt;
  &lt;div&gt;
      &lt;p&gt;Essa é a sessão 1.&lt;/p&gt;
  &lt;/div&gt;
<br/>
  &lt;h3&gt;&lt;a href="#"&gt;Sessão 2&lt;/a&gt;&lt;/h3&gt;
  &lt;div&gt;
      &lt;p&gt;Essa é a sessão 2.&lt;/p&gt;
  &lt;/div&gt;
<br/>
  &lt;h3&gt;&lt;a href="#"&gt;Sessão 3&lt;/a&gt;&lt;/h3&gt;
  &lt;div&gt;
      &lt;p&gt;Essa é a sessão 3.&lt;/p&gt;
  &lt;/div&gt;
&lt;/div&gt;
<br/>
</pre>

            <h3>Aplicando o Accordion:</h3>
            <pre>$("#meu_accordion").accordion();</pre>
        </div>
    </div>


    <div id="exemplo_accordion" style="padding: 10px;">

        <div id="meu_accordion">
            <h3><a href="#">Sessão 1</a></h3>
            <div>
                <p>Essa é a sessão 1. Um texto bem longo que talvez valha a pena mostrar apenas se necessário. Texto texto txt texxxxtooo Texto texto txt texxxxtoooTexto texto txt texxxxtoooTexto texto txt texxxxtoooTexto texto txt texxxxtoooTexto texto txt texxxxtoooTexto texto txt texxxxtoooTexto texto txt texxxxtoooTexto texto txt texxxxtoooTexto texto txt texxxxtoooTexto texto txt texxxxtooo</p>
            </div>

            <h3><a href="#">Sessão 2</a></h3>
            <div>
                <p>Essa é a sessão 2. Um texto bem longo que talvez valha a pena mostrar apenas se necessário. Texto texto txt texxxxtooo Texto texto txt texxxxtoooTexto texto txt texxxxtoooTexto texto txt texxxxtoooTexto texto txt texxxxtoooTexto texto txt texxxxtoooTexto texto txt texxxxtoooTexto texto txt texxxxtoooTexto texto txt texxxxtoooTexto texto txt texxxxtoooTexto texto txt texxxxtooo</p>
            </div>

            <h3><a href="#">Sessão 3</a></h3>
            <div>
                <p>Essa é a sessão 3. Um texto bem longo que talvez valha a pena mostrar apenas se necessário. Texto texto txt texxxxtooo Texto texto txt texxxxtoooTexto texto txt texxxxtoooTexto texto txt texxxxtoooTexto texto txt texxxxtoooTexto texto txt texxxxtoooTexto texto txt texxxxtoooTexto texto txt texxxxtoooTexto texto txt texxxxtoooTexto texto txt texxxxtoooTexto texto txt texxxxtooo</p>
            </div>

            <h3><a href="#">Sessão 4</a></h3>
            <div>
                <p>Essa é a sessão 4. Um texto bem longo que talvez valha a pena mostrar apenas se necessário. Texto texto txt texxxxtooo Texto texto txt texxxxtoooTexto texto txt texxxxtoooTexto texto txt texxxxtoooTexto texto txt texxxxtoooTexto texto txt texxxxtoooTexto texto txt texxxxtoooTexto texto txt texxxxtoooTexto texto txt texxxxtoooTexto texto txt texxxxtoooTexto texto txt texxxxtooo</p>
            </div>
        </div>

    </div>


    <script type="text/javascript">
        inicializador.accordionInit = function() {
            $( "#botao_aplica_accordion" ).button().click(function() {
                $("#meu_accordion").accordion();
            });

            $("#botao_como_faz_accordion").button().click(function() {
                $("#dialog_como_faz_accordion").dialog({
                    width: 700, height: 650, modal: true , 
                    buttons: { "Fechar": function() { $(this).dialog("close"); } }
                });
            });



        };
    </script>
    
</div>
